// 查看摄像头
const showVideomodal = `<div class="modal-dialog" role="document" style="width: 1200px">  
<div class="modal-content">  
    <div class="modal-header">  
        <button type="button" class="close" id="closebutton" aria-label="Close">
          <span  aria-hidden="true">×</span></button>  
        <h4 class="modal-title" id="exampleModalLabel">监控列表</h4>  
    </div>  
    <div class="modal-body">  
				      
				<div id="toolbar" class="btn-group">
						<button id="btn_add" type="button" class="btn btn-default" onclick="addVedio()">
								<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
						</button>
				</div>
				<table id="tb_video" data-row-style="rowStyle"></table>
			
    </div>  
    <div class="modal-footer">  
        <button type="button" class="btn btn-default" id="disscardChange">退出</button>  
    </div>  
</div>`

// 查看摄像头入口函数
function showVideo() {
  let clickVideoNum = 0

  $('body').on('click', '#vedio', function () {
    if (clickVideoNum % 2 == 0) {
      if ($('#modal').children().length != 0) {
        $('#modal div').remove()
      }
      $('#modal').append(showVideomodal)
      $('#modal').modal('show')

      // x按钮，关闭表单，清空数据
      $('#modal').on('click', '#closebutton', function () {
        $('#modal ').modal('hide')
        $('#modal .div').remove()
      })
      // 取消修改
      $('#modal').on('click', '#disscardChange', function () {
        $('#modal').modal('hide')
        $('#modal .div').remove()
      })
      // 绘制监控表格
      InitVedioTable()
      // 显示监控点
      showVideoIcon()
      // 控制显示隐藏
      clickVideoNum++
    } else {
      map.getLayers().forEach(function (value, index, array) {
        if (value.values_.name == 'videovectorLayer') {
          map.removeLayer(value)
        }
      })
      clickVideoNum++
    }
  })
}

// 添加操作按钮
function videoOperation(value, row, index) {
  return (
    `<button class="btn btn-warning" onclick='panto(
    ${JSON.stringify(row)}
    )'> 快速定位</button>` +
    '&nbsp;&nbsp;' +
    `<button class="btn btn-danger" onclick="delUserbyId(${value})"> 删除 </button>`
  )
}
// 监控表格设置
function InitVedioTable() {
  //记录页面bootstrap-table全局变量$table，方便应用
  const queryUrl = 'http://localhost:3000/video/videoList'
  $('#tb_video').bootstrapTable({
    url: queryUrl, //请求后台的URL（*）
    method: 'GET', //请求方式（*）
    toolbar: '#toolbar', //工具按钮用哪个容器
    striped: true, //是否显示行间隔色
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true, //是否显示分页（*）
    sortable: true, //是否启用排序
    sortOrder: 'asc', //排序方式
    sidePagination: 'server', //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
    pageSize: 5, //每页的记录行数（*）
    pageList: [5, 10, 20, 50], //可供选择的每页的行数（*）
    search: true, //是否显示表格搜索
    searchable: true,
    searchOnEnterKey: true,
    strictSearch: false,
    showColumns: true, //是否显示所有的列（选择显示的列）
    showRefresh: true, //是否显示刷新按钮
    minimumCountColumns: 2, //最少允许的列数
    clickToSelect: true, //是否启用点击选中行
    //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: 'ID', //每一行的唯一标识，一般为主键列
    showToggle: true, //是否显示详细视图和列表视图的切换按钮
    cardView: false, //是否显示详细视图
    detailView: false, //是否显示父子表
    showExport: true, //导入功能，需要引入插件
    exportDataType: 'basic',
    editable: true, //编辑功能，引入插件
    responseHandler: function (res) {
      return {
        total: res.result.total,
        rows: res.result.rows,
      }
    },
    //得到查询的参数
    queryParams: function (params) {
      //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
      var temp = {
        // usertype:,
        size: params.limit, //页面大小
        page: params.offset / params.limit + 1, //页码
        sort: params.sort, //排序列名
        sortOrder: params.order, //排位命令（desc，asc）
      }
      return temp
    },
    // 列数据
    columns: [
      {
        checkbox: true,
        visible: true, //是否显示复选框
      },
      {
        field: 'video_id',
        title: 'ID',
        sortable: true,
        align: 'center',
        searchable: true,
      },
      {
        field: 'video_name',
        title: 'name',
        sortable: true,
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: 'name',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'video_api',
        title: '接口地址',
        sortable: true,
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: 'api',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'video_status',
        sortable: true,
        title: '运行状态',
        align: 'center',
      },
      {
        field: 'video_address',
        title: '详细地址',
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: 'address',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'video_x',
        title: '经度',
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: '经度',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'video_y',
        title: '纬度',
        align: 'center',
        searchable: true,
        editable: {
          type: 'text',
          title: '纬度',
          validate: function (v) {
            if (!v) return '不能为空'
          },
        },
      },
      {
        field: 'user_id',
        title: '操作',
        align: 'center',
        valign: 'middle',
        formatter: 'videoOperation',
      },
    ],
    onLoadSuccess: function () {},
    onLoadError: function (error) {
      console.log(error)
    },
    // 保存编辑
    onEditableSave: function (field, row, oldValue, $el) {
      $.ajax({
        type: 'post',
        url: 'http://localhost:3000/users/edit',
        data: row,
        dataType: 'JSON',
        success: function (data, status) {
          if (data.code == '0') {
            alert('提交数据成功')
            $('#tb_usermanage').bootstrapTable('refresh')
          } else {
            alert(data.message)
          }
        },
        error: function () {
          alert('编辑失败')
        },
      })
    },
  })
}

// 地图显示监控图标
function showVideoIcon() {
  $.ajax({
    url: 'http://localhost:3000/video/all',
    type: 'GET',
    success: function (res) {
      //获取到后台返回的数据
      if (res.code == 0) {
        //得到线坐标数据 "114.33209,30.476066;114.330889,30.469543"
        res.result.data.forEach((element) => {
          const {
            video_id,
            video_name,
            video_api,
            video_status,
            video_address,
            video_x,
            video_y,
          } = element

          const videopointGeo = new ol.geom.Point([
            parseFloat(video_x),
            parseFloat(video_y),
          ])

          //创建一个点要素(设置几何以及属性)
          var videofeatuer = new ol.Feature({
            geo: videopointGeo,
            att: {
              //标注信息的标题内容
              title: video_name + ':' + video_address,
              //标注的图片
              videoURL: video_api,
            },
          })

          /**
           * 创建标注样式函数,设置image为图标ol.style.Icon
           * @param {ol.Feature} feature 要素
           */
          var createLabelStyle = function (feature) {
            return new ol.style.Style({
              image: new ol.style.Icon(
                /** @type {olx.style.IconOptions} */
                ({
                  //设置图标点
                  anchor: [0.5, 60],
                  //图标起点
                  anchorOrigin: 'top-right',
                  //指定x值为图标点的x值
                  anchorXUnits: 'fraction',
                  //指定Y值为像素的值
                  anchorYUnits: 'pixels',
                  //偏移
                  offsetOrigin: 'top-right',
                  // offset:[0,10],
                  // 图标缩放比例
                  scale: 0.1,
                  //透明度
                  opacity: 0.75,
                  //图标的url
                  src: '../../../images/monitor.png',
                })
              ),
              text: new ol.style.Text({
                //位置
                textAlign: 'center',
                //基准线
                textBaseline: 'middle',
                //文字样式
                font: 'normal 14px 微软雅黑',
                //文本内容
                text: feature.get('name'),
                //文本填充样式（即文字颜色）
                fill: new ol.style.Fill({ color: '#aa3300' }),
                stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
              }),
            })
          }

          //实例化Vector要素，通过矢量图层添加到地图容器中
          var videoiconFeature = new ol.Feature({
            //坐标点
            geometry: videopointGeo,
            //名称属性
            name: video_name,
            //标注信息的标题内容
            title: video_name + ':' + video_address,
            //标注的图片
            videoURL: video_api,
          })
          videoiconFeature.setStyle(createLabelStyle(videoiconFeature))
          //矢量标注的数据源
          videovectorSource.addFeature(videoiconFeature)
        })
      }
    },
  })
}

// 快速定位至监控
function panto(row) {
  $('#modal ').modal('hide')
  const videopointGeo = new ol.geom.Point([
    parseFloat(row.video_x),
    parseFloat(row.video_y),
  ])

  var duration = 2000 //动画的持续时间（以毫秒为单位）
  const view = map.getView()
  var zoom = 16
  var parts = 2
  var called = false
  //动画完成的回调函数
  function callback(complete) {
    --parts
    if (called) {
      return
    }
    if (parts === 0 || !complete) {
      called = true
      done(complete)
    }
  }
  //第一个动画
  view.animate(
    {
      center: [parseFloat(row.video_x), parseFloat(row.video_y)],
      duration: duration,
    },
    callback
  )
  //第二个动画
  view.animate(
    {
      zoom: zoom - 1,
      duration: duration / 2,
    },
    {
      zoom: zoom,
      duration: duration / 2,
    },
    callback
  )
}

// 弹窗内容
function addPopupvideo(feature) {
  //修改弹框标题
  const title = feature.get('title')
  console.log(feature)
  $('#popup-content .panel-heading').text(title)
  //修改弹框内容
  const list = `
  <div >
  <video style="width:265px;" autoplay="autoplay" loop="loop" id="video" x-webkit-airplay="true" webkit-playsinline="true" muted="">
   <source src=${feature.get('videoURL')} type="video/mp4">
  </video>
  </div>
  `
  $('#popup-table').html(list)
}
